<template>
  <div class="vector-graph">
    <!-- 轮播 -->
    <banner type="3" />
    <!-- 内容 -->
    <div class="vector-wrap center">
      <div class="tab">
        <span @click="get_hot" :class="{ active: hot }">热门</span>
        <span @click="get_new" :class="{ active: !hot }">更新</span>
      </div>
      <waterfall v-if="hot" :photo_list="hot_list" />
      <waterfall v-else :photo_list="new_list" />
    </div>
    <footer-layout></footer-layout>
  </div>
</template>

<script>
import Banner from "@/components/common/Banner";
import Waterfall from "@/components/common/Waterfall";
import FooterLayout from "@/components/common/FooterLayout";

import { get_photo } from "@/api/photo";
export default {
  data() {
    return {
      hot_list: [],
      new_list: [],
      hot: true,
    };
  },
  components: {
    Banner,
    Waterfall,
    FooterLayout,
  },
  created() {
    get_photo(1, 1).then((res) => {
      this.hot_list = res.data.data.photo_list.map((el) => {
        return {
          id: el.photo_id,
          img: el.thumb_w_url_cos,
        };
      });
    });
  },
  methods: {
    get_hot() {
      this.hot = true;
      this.new_list = [];
      get_photo(1, 1).then((res) => {
        this.hot_list = res.data.data.photo_list.map((el) => {
          return {
            id: el.photo_id,
            img: el.thumb_w_url_cos,
          };
        });
      });
    },
    get_new() {
      this.hot = false;
      this.hot_list = [];
      get_photo(1, 2).then((res) => {
        this.new_list = res.data.data.photo_list.map((el) => {
          return {
            id: el.photo_id,
            img: el.thumb_w_url_cos,
          };
        });
      });
    },
  },
};
</script>

<style lang="scss" scoped>
.vector-graph {
  .vector-wrap {
    .tab {
      text-align: center;
      font-size: 18px;
      font-weight: bold;
      margin: 40px 0;
      span {
        margin: 0 10px;
        cursor: pointer;
        &.active {
          color: $mainColor;
        }
      }
    }
  }
}
</style>
